<template>
    <div>
        <div class="header" >
            <el-row :gutter="20">
                <el-col :span="10">
                    <div class="logo" style="-webkit-app-region: drag">
                        <img src="../../../static/img/logo.png" alt="">
                        欢迎登录易店长！
                    </div>
                </el-col>
                <el-col :span="14" class="menu-item-r">
                    <el-col :span="18">
                       &nbsp;
                    </el-col>
                    <el-col :span="2">
                        <i class="icon-minisize  c-def" aria-hidden="true" @click="minWin" style="font-size: 18px"></i>
                    </el-col>
                    <el-col :span="2">
                        <div v-if="this.$store.state.minSize"><i class="icon-Zoom-box c-def" aria-hidden="true" @click="maxWin"></i></div>
                        <div v-if="!this.$store.state.minSize"><i class="icon-restore c-def" aria-hidden="true" @click="restoreWin"></i></div>
                    </el-col>
                    <el-col :span="2">
                        <div><i class="icon-close  c-def" aria-hidden="true" @click="backLogin"></i></div>
                    </el-col>
                </el-col>
            </el-row>
        </div>
        <div class="login-wrap">
            <div class="login">
                <div class="ms-title">
                    <i class="fa fa-user-circle" aria-hidden="true" style="margin: 11px; "></i>
                    <span>登录易店长</span>
                </div>
                <div class="ms-login">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
                        <p>登录名:</p>
                        <el-form-item prop="username">
                            <el-input v-model="ruleForm.username" placeholder="请输入账号"
                                      style="height: 34px; width: 234px;margin-top: 8px"></el-input>
                        </el-form-item>
                        <p>登录密码:</p>
                        <el-form-item prop="password">
                            <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password"  autocomplete="new-password"  auto-complete="new-password"
                                      @keyup.enter.native="submitForm('ruleForm')"
                                      style="height: 34px; width: 234px; margin-top: 8px"></el-input>
                        </el-form-item>


                        <div class="login-btn">
                            <el-button type="primary" @click="submitForm('ruleForm')"
                                       style="height: 34px; width: 244px; font-size: 16px; background-color: #Fc5252">
                                登 录

                            </el-button>
                            <!--<el-button type="primary" @click="sendMessage"-->
                                       <!--style="height: 34px; width: 244px; font-size: 16px; background-color: #Fc5252">-->
                                <!--发送消息-->

                            <!--</el-button>-->
                            <!--<el-button type="primary" @click="updateP"-->
                                       <!--style="height: 34px; width: 244px;">检查更新111222-->

                            <!--</el-button>-->
                            <i style="font-size:10px;color:red; margin-top: 6px;float: left">{{message}}</i>
                            <!--<p class="regist" @click="regist"-->
                               <!--style="font-size:14px;color:red; margin-top: 11px; cursor: pointer; float: right">-->
                                <!--马上注册</p>-->
                            <!--<p class="lose" @click="lose"-->
                               <!--style="font-size:14px;color:#666; margin-top: 11px; margin-right: 5px; cursor: pointer; float: right">-->
                                <!--忘记密码?</p>-->
                        </div>
                        <div>
                            <span class="regist" @click="regist"
                               style="font-size:14px;color:red; margin-top: 5px; cursor: pointer; float: right">马上注册</span>
                            <span class="lose" @click="lose" style="font-size:14px;color:#666; margin-top: 5px; margin-right: 5px; cursor: pointer; float: right">忘记密码？</span>
                        </div>
                    </el-form>
                </div>
            </div>

            <el-dialog v-model="addFormVisible" :close-on-click-modal="false" style="text-align: center;" title="快速注册"
                       size="tiny">
                <el-form :model="addForm" :rules="addFormRules" ref="addForm" style="font-size: 16px;color: #333333">
                    <el-form-item label="登录名:" prop="name">
                        <el-input v-model="addForm.name"></el-input>
                    </el-form-item>
                    <span style="font-size:13px;color:red">{{registMessage}}</span>
                    <el-form-item label="密码:" prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="addForm.password" autocomplete="new-password"  auto-complete="new-password"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="repeatPassword">
                        <el-input type="password" placeholder="请确认密码" v-model="addForm.repeatPassword" autocomplete="new-password"  auto-complete="new-password"></el-input>
                    </el-form-item>
                    <el-checkbox v-model="addForm.status" style="font-size:10px;color:#666666">我已阅读并同意《易店长》相关服务

                    </el-checkbox>
                </el-form>
                <el-button type="primary" @click.native="addSubmit('addForm')" :loading="addLoading"
                           style="width: 244px; height: 34px; margin-top: 11px" >注册

                </el-button>
            </el-dialog>
            <span class="link-yunland"><a href="http://www.yunlandtech.com/">© 2017 河南云朗网络科技有限公司 版权所有</a></span>
        </div>
    </div>

</template>

<script>
    import cfg from '../../properties';
    import qs from 'qs';
    import '../../../static/css/custom/style.css';

    import * as type from '../../store/types';
    import ElCheckbox from "../../../node_modules/element-ui/packages/checkbox/src/checkbox";
    import ElButton from "../../../node_modules/element-ui/packages/button/src/button";
    import ElDialog from "../../../node_modules/element-ui/packages/dialog/src/component";
    let ipc;
    try {
         ipc = window.require('electron').ipcRenderer;
    }catch(e){

    }
    export default {
        components: {ElDialog}, data: function () {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.addForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                message: '',
                registMessage: '',
                ruleForm: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'change'}
                    ]
                },
                addFormVisible: false,//新增界面是否显示
                addLoading: false,
                addFormRules: {
                    name: [
                        {required: true, pattern: /^[\w@.]+$/,message: '请使用手机号或邮箱进行注册', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'change'}
                    ],
                    repeatPassword: [
                        {validator: validatePass, trigger: 'change'}
                    ]
                },
                //注册页面数据
                addForm: {
                    name: '',
                    password: '',
                    repeatPassword: '',
                    status: 0
                }
            }
        },
        methods: {
            updateP(){
                alert("开始检查")
                let self = this;
                const ipc = window.require('electron').ipcRenderer;
                ipc.on('backinfo', self.backInfo)
                ipc.send('check-for-update')
            },
            backInfo(event,arg){
                console.log(event)
                alert(arg)
            },
            sendMessage(){
                this.$ws.send("*update*");
            },

            submitForm(formName) {
                if (this.ruleForm.username && this.ruleForm.password) {
                    let baseUrl = cfg.api_url + "/login";
                    let args = {
                        account: this.ruleForm.username,
                        password: this.ruleForm.password,
                        kindCode: "10",
                        remberMe: "true"
                    };
                    let self = this;
                    this.$axioxs.post("/login", qs.stringify(args)).then((res) => {
                        self.$router.push("/welcome");//跳转到Log页面
                        self.$store.commit(type.CHANGE_NAME,  res.data.name);
                        self.$store.commit(type.LOGIN_REMOVE_TITLES, '1');
                        localStorage.setItem("currentUser", JSON.stringify(res.data));
                        console.log("current",JSON.stringify(res.data))
                    }, (res) => {
                        self.message = res;
                    });
                }
            },
            loginByQQ(){
                console.log(123);
            },
            loginByWeixin(){
                console.log(234);
            },
            loginByXinlang(){
                console.log(567);
            },
            lose(){
                console.log(789);
            },
            regist(){
                this.addFormVisible = true;
                this.addForm = {
                    name: '',
                    password: '',
                    repeatPassword: '',
                    status: 0
                };
            },
            addSubmit: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.addForm.password === this.addForm.repeatPassword && this.addForm.status) {
//                    let registerUrl = cfg.api_url + "/register/";
                            let args = {
                                account: this.addForm.name,
                                password: this.addForm.password,
                                kindcode: "10"
                            }
                            const self = this;
                            console.log(this.$store);
                            console.log(this.$axioxs);
                            this.$axioxs.post("/register/", qs.stringify(args)).then((res) => {
                                let args = {
                                    account: self.addForm.name,
                                    password: self.addForm.password,
                                    kindCode: "10",
                                    remberMe: "true"
                                };
                                self.$axioxs.post("/login", qs.stringify(args)).then((res) => {
                                    self.$store.commit(type.CHANGE_NAME,  self.addForm.name);
                                    self.$router.push("/welcome");//跳转到Log页面
                                    self.$store.commit(type.LOGIN_REMOVE_TITLES, '1');
                                    localStorage.setItem("currentUser", JSON.stringify(res.data));
                                })
                            }, (res) => {
                                this.registMessage = res;
                                console.log(res);
                            });
                        }
                    }
                });

            },
            backLogin: function () {
                ipc.send('window-all-closed');
//                try {
//                var win = nw.Window.get();
//                win.close();
                return;
//                }catch(a){
//                    var url = properties.api_url + "/logout";
//                    $.get(url, function() {
//                        window.location = "#/login";
//                        window.location.reload();
//                        window.localStorage.removeItem("me");
//                    });
//                }
            },
            minWin: function () {
                ipc.send('hide-window');
//                var win = nw.Window.get();
//                win.minimize();
                return;
            },
            maxWin: function () {
                ipc.send('show-window');
                this.$store.commit(type.WIN_SIZE, true);
//                var win = nw.Window.get();
//                win.maximize();
                return;

            },
            restoreWin:function () {
                this.$store.commit(type.WIN_SIZE, false);
                ipc.send('orignal-window');
//                var win = nw.Window.get();
//                win.restore();
                return;
            },
        }
    }
</script>

<style scoped>
    @import "../../../static/css/font-awesome.min.css";

    .login-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(../../../static/img/login.png);
        background-size: cover;
    }

    .login {
        position: absolute;
        width: 281px;
        height: 397px;
        left: 66%;
        top: 13%;
    }

    .ms-title {
        height: 41px;
        font-size: 20px;
        background: #cacaca;
        line-height: 41px;
    }

    .ms-login {
        height: 300px;
        padding: 23px;
        background: #fff;
    }

    .login-btn {
        text-align: center;
        padding-top: 5px;
        padding-bottom: 24px;
    }

    .login-btn button {
        width: 100%;
        height: 34px;
    }

    .qq {
        margin-left: 31px;
        margin-top: 11px;
        margin-bottom: 11px;
    }

    .weixin {
        margin-left: 31px;
        margin-top: 11px;
        margin-bottom: 11px;
    }

    .xinlang {
        margin-left: 31px;
        margin-top: 11px;
        margin-bottom: 11px;
    }

    .header {
        height: 50px;
        font-size: 22px;
        line-height: 50px;
        font-weight: bold;
        color: #fff;
        background: #cc000b;
        text-align: center;
    }

    .logo {
        padding-left: 20px;
        text-align: left;
    }

    .logo img {
        vertical-align: middle;
        padding: 6px 0;
    }

    .menu-item-r {
        float: right;
        font-size: 16px;
        font-weight: bold;
        height: 50px;
        line-height: 50px;
    }

    .menu-item-r .fa {
        vertical-align: middle;
    }
    .link-yunland{
        color:#9d9d9d;
        position: absolute;
        top:90%;
        padding-left: 40px;
        cursor: default;
    }
    .link-yunland a{
        color:#9d9d9d;
        cursor: default;
    }
    .link-yunland a:hover{
        color: #333333;
    }
</style>
